<template>
    <div class="modal_signin_info">
        <div class="row">
            <div class="col">{{ t("activity_page_canGet") }}: {{ $currencyMoney(signData.day_money) }}</div>
            <div class="col link_btn" @click="goAwardHandle">{{ t("activity_page_rewardDesc_btn") }}</div>
        </div>
        <div class="progress">
            <div class="progress_bar" :style="`width: ${progress}%`"></div>
            <div class="text_pecent">{{ $currencyMoney(signData.cur_bet) }}/{{ $currencyMoney(nextLevelData.bet) }}</div>
        </div>
        <div class="row">
            <div class="col"><span class="icon_coin"></span>{{ currentLevelData.day }}</div>
            <div v-if="currentLevelData.day !== nextLevelData.day" class="col"><span class="icon_coin"></span>{{ nextLevelData.day }}</div>
        </div>
        <div class="text">{{ t('activity_page_signinDesc') }}</div>
        <div class="btns_wrap">
            <nut-button @click="goToBet" class="btn_b btn_keep_bet">{{ t('activity_page_keepBet') }}</nut-button>
            <nut-button @click="signInAction" class="btn_b">{{ t('activity_page_confirmGet') }}</nut-button>
        </div>
        <div class="notice">{{ t('activity_page_sevenDays') }}</div>
    </div>        
</template>
<script lang="ts" setup>
import { defineEmits, computed } from 'vue'
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const emit = defineEmits(["signIn", "goBet", "goAward"]);
const props = defineProps({
    singInSucInfo: {
        type: Object,
        default: {}
    },
    currentLevelData: {
        type: Object,
        default: {}
    },
    signData: {
        type: Object,
        default: {}
    },
    nextLevelData: {
        type: Object,
        default: {}
    }
})

const progress = computed(() => {
    const rate = Number(props.signData.cur_bet) * 100 / Number(props.nextLevelData.bet)
    return rate > 100 ? 100 : rate
})
const signInAction = () => {
    emit("signIn");
}

const goToBet = () => {
    emit("goBet");
}

const goAwardHandle = () => {
    emit("goAward");
}

</script>
<style lang="scss" scoped>
.modal_signin_info {
    .row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        gap: 20px;
        .col {
            font-size: 14px;
            color: #ffffff;
            .time {
                color: #ffe141;
            }
            &.link_btn {
                color: #ffe141;
                text-decoration: underline;
            }
            .icon_coin {
                width: 12px;
                height: 12px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 2px;
                background: url("/imgs/activity/signIn/icon_coin7.png") no-repeat;
                background-size: 100% 100%;
            }
            &:last-child {
                text-align: right;
            }
        }
    }
    .progress {
        width: 100%;
        height: 16px;
        background: #1b1f4b;
        border-radius: 20px;
        position: relative;
        margin-bottom: 5px;
        .progress_bar {
            height: 100%;
            background: linear-gradient(90deg, #5567ff 0%, #9e1eff 100%);
            border-radius: 8px;
        }
        .text_pecent {
            position: absolute;
            top: 0;
            left: 10px;
            color: #fff;
            font-size: 10px;
            line-height: 16px;
        }
        .icon_coin {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: url("/imgs/activity/signIn/icon_coin.png") no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>